<template>
  <div class="home">
    <!-- 大的背景色or背景图铺底 -->
    <div class="bacc">
      <!-- 第一楼 主题讲解 -->
      <div class="floor1">
        <div class="center">
          <div class="main">
            <div class="main1">
              <img src="../../public/home/banner1.jpg" alt="" style="height:100%;float:left;">
              <div></div>
            </div>
            <div class="main2">
              <img src="../../public/home/banner1.jpg" alt="" style="height:100%;float:right">
              <div></div>
            </div>
            <div class="main3"></div>
            <div class="main4">
              <img src="../../public/home/drew2.png" alt="" style="width:100%">
              <Divider plain orientation="right" style="margin:0"></Divider>
              <p style="color:white;font-size:20px;line-height:35px">drew house 鼓励年轻人拥抱自己的个性，勇敢展现自己最真实的一面，不要惧怕社会对自己的评价。这里是一个可以让你放松
                做自己的地方，别在意别人的想法，一起来玩儿吧！</p>
              
            </div>
          </div>
        </div>
      </div>
      <!-- 第二楼 首页轮播 -->
      <div class="scrop">
        <el-carousel :interval="4000" type="card" height="600px">
          <el-carousel-item v-for="(p,i) in imgs" :key="i">
            <img :src="p.img" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 第三楼 图片文字介绍 -->
      <div class="floor3">
        <div class="one">
          <div class="one_left" style="position:relative">
            <img src="../../public/home/jacket.jpg" alt="">
            <p style="color:white;font-weight:900;font-size:70px;position:absolute;top:45%;left:45%">夹克</p>
          </div>
          <div class="one_right" style="position:relative">
            <img src="../../public/home/weiyi.jpg" alt="">
            <p style="color:white;font-weight:900;font-size:70px;position:absolute;top:45%;left:45%">卫衣</p>
          </div>
        </div>
        <div class="two" style="position:relative">
          <img src="../../public/home/bg7.jpg" alt="">
          <p style="color:green;font-weight:900;font-size:70px;position:absolute;top:50%;left:46%">NEW</p>
        </div>
      </div>
      
    </div>
    <my_footer/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import MyHeader from '@/components/MyHeader.vue'
import MyFooter from '@/components/MyFooter.vue'
export default {
  data () {
     return {
        imgs:[
        {cid:0,img:require("/public/home/banner1.jpg")},
        {cid:1,img:require("/public/home/banner2.jpg")},
        {cid:2,img:require("/public/home/banner3.jpg")},
        {cid:3,img:require("/public/home/banner4.jpg")},
        {cid:4,img:require("/public/home/banner5.jpg")},
        {cid:5,img:require("/public/home/banner6.jpg")}
        ]
     }
  },
  name: 'Home',
  components: {
    HelloWorld
  },
  comments:{
    MyHeader,
    MyFooter
  }
}
</script>

<style lang="scss">
  .bacc{
    background-color: rgb(241, 237, 237);
    z-index: -100;
  }
  .floor1{
    width: 100%;
    height: 600px;
    position: relative;
    z-index: 100;
    .center{
      position: absolute;
      top: 0;
      left:5%;
      width: 1700px;
      margin: 0 auto;
      height: 650px;
      background: url('../../public/home/bigbaci.jpg');
      z-index: -10;
      .main{
        width: 90%;
        height: 500px;
        background:rgba($color: #000000, $alpha: 0.7);
        border: 1px solid black;
        margin: 100px auto;
        position: relative;
        .main1{
          width: 385px;
          height: 200px;
          background-color: rgba(158, 158, 158, 0.6);
          position: absolute;
          left: 2%;
          top: 7%;
          z-index: 0;
          div{
            width: 190px;
            height: 190px;
            border-radius: 45%;
            background: rgba(187, 147, 147, 0.53);
            position: absolute;
            top: 5px;
            left: 185px;
            animation: rotate 5s linear infinite;
            z-index: -1;
          }
        }
        .main2{
          width: 385px;
          height: 200px;
          background-color: rgba(158, 158, 158, 0.6);
          position: absolute;
          left: 2%;
          bottom: 7%;
          z-index: 0;
          div{
            width: 190px;
            height: 190px;
            border-radius: 45%;
            background: rgba(163, 187, 148, 0.55);
            position: absolute;
            top: 4px;
            left: 10px;
            animation: rotate 5s linear infinite;
            z-index: -1;
          }
        }
        .main3{
          width: 692px;
          height: 433px;
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-image: url('../../public/home/drew1.jpg');
          position: absolute;
          top: 7%;
          left: 29%;
        }
        .main4{
          width: 354px;
          height: 433px;
          background-color: rgba(158, 158, 158, 0.6);
          position: absolute;
          top: 7%;
          right: 1.5%;
        }
      }
    }
  }
  .scrop{
    width: 100%;
    height: 600px;
    margin-top: 150px;

  }
  .el-carousel__item img {
    height:600px;
    width:100%;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .floor3{
    width: 100%;
    height: 1900px;
    margin-top: 200px;
    .one{
      width: 1800px;
      height: 800px;
      overflow: hidden;
      margin: 0 auto;
      // background-color: orchid;
      .one_left{
        margin: 10px;
        width: 856px;
        height: 800px;
        // border-right: 1px solid black;
        display: inline-block;
        overflow: hidden;
        img{
          transition: all 0.6s;
        }
      }
      .one_left>img:hover{
        transform: scale(1.1, 1.1);
        
      }
      .one_right{
        margin: 10px;
        width: 856px;
        height: 800px;
        display: inline-block;
        overflow: hidden;
        img{
          transition: all 0.6s;
        }
      }
      .one_right>img:hover{
        transform: scale(1.1, 1.1);
        
      }
    }
    .two{
      margin: 30px auto;
      width: 1735px;
      height: 800px;
      overflow: hidden;
      img{
          transition: all 1s;
      }
      
    }
    .two>img:hover{
        transform: scale(1.2, 1.2);
      }
  }
</style>
